<template>
  <div>
    <div class="p-1">营业信息</div>
    <div class="px-3">
      <table class="w-100 table bg-light">
        <tbody>
          <tr>
            <td width="25%">
              成立日期：{{ $utils.dateFormat(data.established_date, 'yyyy年MM月dd日') || '-' }}
            </td>
            <td width="25%">
              核准日期： {{ $utils.dateFormat(data.check_date, 'yyyy年MM月dd日') || '-' }}
            </td>
            <td width="25%">注册号：{{ data.number || '-' }}</td>
            <td width="25%">登记状态：{{ data.business_status || '-' }}</td>
          </tr>
          <tr>
            <td width="25%">注册资本：{{ data.register_funds || '-' }}</td>
            <td width="25%">登记机关： {{ data.register_org || '-' }}</td>
            <td width="25%">
              营业期限自：{{ $utils.dateFormat(data.term_start, 'yyyy年MM月dd日') || '-' }}
            </td>
            <td width="25%">
              营业期限至：{{ $utils.dateFormat(data.term_end, 'yyyy年MM月dd日') || '-' }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="p-1">股东及出资信息</div>
    <div class="px-3">
      <table class="w-100 table bg-light" v-loading="shareLoading">
        <tr v-for="(p, index) of shareHolderData" :key="index">
          <td>股东名称：{{ p.real_name }}</td>
          <td>股东类型：{{ p.stock_type || '自然人股东' }}</td>
          <td>认缴出资额： {{ p.invest_funds || '-' }} (万元)</td>
          <td>持股比例： {{ p.sh_rate || '-' }} %</td>
          <td>证照/证件号码： {{ p.id_card }}</td>
        </tr>
        <tr v-if="!shareHolderData.length">
          <td>股东名称：-</td>
          <td>股东类型：-</td>
          <td>认缴出资额：-(万元)</td>
          <td>持股比例：-%</td>
          <td>证照/证件号码：-</td>
        </tr>
      </table>
    </div>
    <div class="p-1">变更信息</div>
    <div class="px-3">
      <c-table
        border
        class="table-sm"
        header-cell-class-name="bg-light"
        :stripe="true"
        v-loading="loading"
        :columns="tableColumns"
        :data="tableData"
      ></c-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      order: { update_business_time: 'desc' },
      loading: false,
      shareHolderData: [],
      tableName: 'update_record_business',
      tableColumns: [
        { attrs: { label: '变更日期', prop: 'update_business_time', width: '160px' } },
        { attrs: { label: '变更事项', prop: 'update_item' } },
        { attrs: { label: '变更前内容', prop: 'update_value_bef' } },
        { attrs: { label: '变更后内容', prop: 'update_value_aft' } },
      ],
      tableData: [],
      shareLoading: false,
    }
  },

  computed: {},

  watch: {
    data: {
      handler: function () {
        const params = { 'register_no.eq': this.data.register_no }
        this.getShareHolder(params)
        this.getData(params)
      },
      deep: true,
      immediate: true,
    },
  },

  created() {},
  methods: {
    getShareHolder(params) {
      this.shareLoading = true
      this.$api
        .getData(this.$serviceName, 'datum_customer_shareholder_import', params, {
          sh_rate: 'desc',
        })
        .then(res => {
          this.shareHolderData = (res && res.data) || []
        })
        .finally(() => {
          this.shareLoading = false
        })
    },
    getData(params) {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, params, this.order)
        .then(res => {
          this.tableData = ((res && res.data) || []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.update_business_time = this.$utils.dateFormat(
        item.update_business_time,
        'yyyy年MM月dd日'
      )
      return item
    },
  },
}
</script>
<style lang="scss" scoped></style>
